<!--
  List for tracks within one track group
  This DOM element must be placed in a flex container,
  otherwise the iron-list will not work
-->

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../track-control/track-mini-control.html">
<link rel="import" href="../genemo-styles.html">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,400italic,700italic,700,400" rel="stylesheet" type="text/css">
<dom-module id="chart-track-list">
  <template>
    <style include="genemo-shared-styles iron-flex" is="custom-style">
      :host {
        padding: 0;
        @apply(--layout-flex);
        @apply(--layout-vertical);
        position: relative;
      }
      paper-material {
        @apply(--layout-fit);
        @apply(--layout-vertical);
        padding: 1em;
      }
      paper-material > div.header {
        color: #3F51B5;
        margin-bottom: 0.5em;
      }
      iron-list {
        @apply(--layout-flex);
        --iron-list-items-container: {
           @apply(--chart-track-list-items-mixin);
        };
      }
    </style>
    <paper-material elevation="1">
      <div class="header">[[group.label]]</div>
      <iron-list id="groupList" items="[[group.array]]" as="track"
        selection-enabled multi-selection$="[[!group.singleChoice]]"
        on-selected-items-changed="_selectedItemsChangedHandler">
        <template>
          <track-mini-control track="[[track]]" group="[[group]]"
            selected="[[selected]]">
          </track-mini-control>
        </template>
      </iron-list>
    </paper-material>
  </template>
  <script>
    var GIVe = (function (give) {
      'use strict'

      give.ChartTrackList = Polymer({
        is: 'chart-track-list',

        properties: {
          textSize: {
            type: Number,
            value: 12    // unit is px
          },

          settingKey: {
            type: String,
            value: give.GENEMO_SELECTED_KEY
          },

          group: {
            type: Object
          },

          instantChange: {
            type: Boolean,
            value: false
          }
        },

        trackToDOM: function (scrollToSelected) {
          // this is used when resetting selection
          // DOM means this.$.groupList.selectedItems
          if (this.group && this.group.every) {
            this.$.groupList.clearSelection()
            var firstSelected = null
            this.group.every(function (track, index) {
              if (track.getSetting(this.settingKey)) {
                if (firstSelected === null) {
                  firstSelected = index
                }
                this.$.groupList.selectItem(index)
                return this.$.groupList.multiSelection
              }
              return true
            }, this)
            if (scrollToSelected && firstSelected !== null) {
              // scroll to first selected item
              this.$.groupList.scrollToIndex(firstSelected)
            }
          }
        },

        DOMToTrack: function () {
          // this is used when submitting the results
          if (this.group && this.group.forEach) {
            this.group.forEach(function (track, index) {
              track.setSetting(this.settingKey, false)
            }, this)
            if (this.$.groupList.selectedItems) {
              if (Array.isArray(this.$.groupList.selectedItems)) {
                this.$.groupList.selectedItems.forEach(function (track) {
                  track.setSetting(this.settingKey, true)
                }, this)
              } else {
                this.$.groupList.selectedItems.setSetting(this.settingKey, true)
              }
            }
          }
        },

        resetAllTracks: function () {
          if (this.group && this.group.every) {
            this.group.every(function (track) {
              track.resetSetting(this.settingKey)
            }, this)
            this.trackToDOM()
          }
        },

        applyFilter: function (map, flags) {
          this.group.forEach(function (track, index) {
            if (flags.hasOwnProperty('matched') && map.hasOwnProperty(track.id)) {
              if (flags.matched) {
                this.$.groupList.selectItem(index)
              } else {
                this.$.groupList.deselectItem(index)
              }
            } else if (flags.hasOwnProperty('unmatched') && !map.hasOwnProperty(track.id)) {
              if (flags.unmatched) {
                this.$.groupList.selectItem(index)
              } else {
                this.$.groupList.deselectItem(index)
              }
            }
          }, this)
        },

        _selectedItemsChangedHandler: function (e) {
          if (this.instantChange) {
            this.DOMToTrack()
          }
        }
      })

      return give
    })(GIVe || {})
  </script>
</dom-module>
